<template>
    <div>

        <div class="control">
            <!-- 全部状态 -->
            <div class="inputItem">
                <div class="title">申请状态</div>
                <div class="inputBox">
                    <el-select class="select" v-model="status" placeholder="请选择">
                        <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>


            <div class="inputItem">
                <div class="title">加入车队</div>
                <div class="inputBox" style="width: 300px;">
                    <!-- <el-input v-model="fleetName" @keyup.enter.native="cread"> </el-input> -->
                    <el-input :readOnly="true" v-model="fleetName" placeholder="请选择车队">
                        <template slot="append">
                            <div style="cursor: pointer" @click="Selectcargoe">
                                选择车队
                            </div>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="inputItem">
                <div class="title">司机名称</div>
                <div class="inputBox">
                    <el-input v-model="driverName" @keyup.enter.native="cread"> </el-input>
                </div>
            </div>


            <!-- 查询 -->
            <el-button type="primary" size="small" icon="el-icon-search" @click="cread">筛选</el-button>
            <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
        </div>
        <div class="main">
            <div class="list">
                <el-table :data="records" style="width: 100%" ref="table3">
                    <el-table-column align="center" prop="serialNumber" label="序号">
                        <template slot-scope="scope">
                            {{ (scope.$index) * ((pageCurrent - 1) * 10 + 1) + 1 }}
                        </template>
                        <!-- 不要再写scope.$index + 1这种方法第二页又从1开始数,后面统一下 你请求列表调我那个前端序号方法 -->
                    </el-table-column>
                    <el-table-column label="申请状态">
                        <template slot-scope="scope">
                            <div class="tag dispatched" v-if="scope.row.applyStatus == 1">
                                <div class="dian"></div>
                                <div class="text">已同意</div>
                            </div>
                            <div class="tag yellow" v-else-if="scope.row.applyStatus == 2">
                                <div class="dian"></div>
                                <div class="text">已拒绝</div>
                            </div>
                            <div class="tag red" v-else-if="scope.row.applyStatus == 0">
                                <div class="dian"></div>
                                <div class="text">待确认</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="fleetName" label="加入车队">
                    </el-table-column>
                    <el-table-column align="center" prop="driverName" label="司机名称">
                    </el-table-column>
                    <el-table-column align="center" prop="phoneNumber" label="手机号">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="准驾车型">
                        <template slot-scope="scope">
                            <div v-if="scope.row.licenseLevel && scope.row.licenseLevel.message">{{
                                scope.row.licenseLevel.message }}</div>
                            <div v-else>--.--</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="绑定车辆">
                        <template slot-scope="scope">
                            <div v-if="scope.row.numberplate">{{ scope.row.numberplate }}</div>
                            <div v-else>--.--</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="车辆类别">
                        <template slot-scope="scope">
                            <div v-if="scope.row.vehicleType">{{ scope.row.vehicleType }}</div>
                            <div v-else>--.--</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="createTime" label="申请时间" sortable></el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <div v-if="scope.row.applyStatus == 0">
                                <el-button type="text" @click="agree(scope.row, 1)" size="small">同意</el-button>
                                <el-button type="text" size="small" @click="agree(scope.row, 2)">拒绝</el-button>
                            </div>
                            <div v-else>
                                <el-button type="text" size="small" @click="showAuditDialog(scope.row)">查看审批人</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="paginationBox">
                <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
                    :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
                    <template slot>
                        <span style="
                  color: #686868;
                  font-size: 12px;
                  margin-right: 20px;
                  display: inline-block;
                ">共{{ data.total }}条,每页{{ pageSize }}条</span>
                    </template>
                </el-pagination>
            </div>
        </div>

        <el-dialog class="dialog" title="审批人" :visible.sync="visibleAuditBox" width="356px">
            <el-descriptions column="1" :labelStyle="{
                color: '#939393',
                fontSize: '12px',
                fontWeight: 'bold',
                marginRight: '20px',
            }" :contentStyle="{
    color: '#262626',
    fontSize: '12px',
}">
                <el-descriptions-item label="审批人">{{ updateBy }}</el-descriptions-item>
                <el-descriptions-item label="审批时间">{{ updateTime }}</el-descriptions-item>
                <el-descriptions-item label="审批意见">同意加入</el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <el-dialog title="车队信息" :visible.sync="DialogFleet" center class="fpkp-dialog">
            <el-row class="flex-fpkp">
                <el-col :md="10" class="ipt-qym" style="margin-bottom: 15px;">
                    <div style="display: flex;">
                        <el-input v-model="key" placeholder="请输入车队名称" clearable>
                        </el-input>
                        <el-button type="primary" style="margin-left: 15px;" @click="qyxz(3)">查询</el-button>
                    </div>
                </el-col>

            </el-row>
            <!-- 无数据时显示 -->
            <div class="nullPng" v-if="DialogAcceptmood.length == 0">
                <div>
                    <img src="/null.png" alt="" />
                    <p>暂无数据</p>
                </div>
            </div>
            <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="DialogAcceptmood"
                :header-cell-style="{
                    background: '#f5f7fa',
                    color: '#606266',
                }" highlight-current-row row-class-name="row-class">
                <el-table-column prop="fleetName" label="承运方名称" align="center"></el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作按钮" align="center">
                    <template slot-scope="scope">
                        <div class="cmd-bt-config">
                            <el-button type="primary" style="margin-bottom: 10px"
                                @click="AcceptListFleet(scope.row)">选择</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>
  
<script>
export default {
    data() {
        return {
            /* 搜索start */
            fleetName: "",
            driverName: "",
            fleetId: '',
            status: "-1",
            updateBy: '',
            updateTime: '',
            statusArr: [
                { label: "全部", value: "-1" },
                { label: "待确认", value: "0" },
                { label: "已同意", value: "1" },
                { label: "已拒绝", value: "2" }
            ],
            /* 搜索end*/
            visibleAuditBox: false,
            data: {
                total: "",
                size: "",
                pages: "",
            },
            records: [{ serialNumber: 1 }, { serialNumber: 1 }, { serialNumber: 1 }, { serialNumber: 1 }, { serialNumber: 1 }, { serialNumber: 1 }, { serialNumber: 1 }, { serialNumber: 1 }, { serialNumber: 1 }, { serialNumber: 1 }, { serialNumber: 1 }],
            pageCurrent: 1, //当前页码
            pageSize: "10", //每页10条
            DialogAcceptmood: [],
            DialogFleet: false,
            key: ''
        };
    },
    created() {
        this.cread()
    },
    methods: {
        changePages(e) {
            this.pageCurrent = e
            this.cread()
        },
        //选择车队
        async Selectcargoe() {
            let parmas = {
                fleetName: this.key,
            };
            let res = await this.$http.orderApi.dropDownFleet(parmas);
            this.DialogAcceptmood = res.data.data.records;
            this.DialogFleet = true;
        },
        //选择车队
        async AcceptListFleet(e) {
            this.fleetId = e.fleetId;
            this.fleetName = e.fleetName;
            this.DialogFleet = false;
        },
        qyxz() {
            this.Selectcargoe();
        },

        async cread() {
            let res = await this.$http.fleetManagementApi.examineDriver({
                status: this.status,//  -1全部0待审核1同意2拒绝
                fleetType: '1',//    0加入1解绑
                fleetId: this.fleetId,
                driverName: this.driverName,// 司机名称
                pageIndex: this.pageCurrent,
                pageSize: this.pageSize
            })
            this.records = res.data.data.records
            this.data = res.data.data
            //console.log(res)

        },
        async agree(e, i) {
            let name = ''
            let that = this
            if (i == 1) {
                name = '同意'
            } else {
                name = '拒绝'
            }
            this.$confirm('是否' + name + '该司机解绑' + e.fleetName + '车队', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.comfir(e, i)
            }).catch(() => {

            });
        },
        async comfir(e, i) {
            let res = await this.$http.fleetManagementApi.modifyJoinRecord({
                id: e.id,
                status: i,
            })
            if (res.data.code == 200) {
                this.$message.success('操作成功')
                this.cread()
            }
        },
        CleanUp() {
            this.fleetId = ''
            this.fleetName = ''
            this.driverName = ''
            this.status = '-1'
            this.cread()
        },
        getSerialNumber(dataArr) {
            // 前端解决序号
            dataArr.forEach((item, i) => {
                let num = i + 1;
                item.serialNumber = num;
            });
        },
        showAuditDialog(e) {
            this.visibleAuditBox = true;
            this.updateBy = e.updateBy
            this.updateTime = e.updateTime



        },
        // 记录滚动距离
        scrollEvent(res) {
            this.$route.meta.scrollTop = res.target.scrollTop
            //console.log(res.target.scrollTop);
        },



    },
    activated() {
        //组件激活时监听表格滚动条位置,
        this.$refs.table3.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
        // 激活设置滚动位置
        this.$refs.table3.bodyWrapper.scrollTop = this.$route.meta.scrollTop
    },
    beforeRouteLeave(to, from, next) {
        // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
        this.$refs.table3.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
        next()
    },


    mounted() {
        this.cread()
    },

};
</script>
  
<style lang="scss" scoped>
.control {
    height: 76px;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 29px;

    .inputItem {
        display: flex;
        align-items: center;
        margin-right: 23px;

        >.title {
            color: #262626;
            font-size: 12px;
            margin-right: 7px;
        }

        >.inputBox {
            width: 160px;

            ::v-deep .el-input__inner {
                height: 32px;
                font-size: 12px;
            }

            ::v-deep .el-input__inner::placeholder {
                color: #c3c3c3;
                font-size: 12px;
            }
        }

        ::v-deep .el-input__icon {
            line-height: 0;
        }
    }
}

.main {
    width: 100%;
    height: calc(100vh - 266px);

    background-color: #fff;


    .list {
        height: calc(100% - 48px);
        padding: 0 30px;

        ::v-deep .el-table__body-wrapper {
            height: calc(100vh - 361px) !important;
            overflow-y: scroll;
        }

        // 表头样式
        ::v-deep .el-table__header th {
            background-color: #f0f6fd;
            color: #262626;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            height: 48px;
            padding: 0;

            // 表 body的td
            ::v-deep .el-table__body td {
                color: #595959;
                font-size: 12px;
            }
        }

        .tag {
            width: 63px;
            height: 28px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            margin: 0 auto;

            .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                margin-right: 4px;
            }

            &.yellow {
                background-color: #FFFCE8;
                color: #F9AA0D;

                .dian {
                    background-color: #F9AA0D;
                }
            }

            &.dispatched {
                background-color: #ecf5fe;
                color: #1890ff;

                .dian {
                    background-color: #1890ff;
                }
            }

            &.red {
                background-color: #FDE8E9;
                color: #F7555D;

                .dian {
                    background-color: #F7555D;
                }
            }
        }

        .stateBtns {
            height: 30px;
            width: 76px;

            ::v-deep .el-button {
                height: 30px;
                width: 76px;
                font-size: 12px;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 30px;
            }

            .waitPass {
                background-color: #ecf5fe;
                color: #1890ff;
            }

            .noPass {
                background-color: #fde8e9;
                color: #f7555d;
            }
        }
    }

    .paginationBox {
        border-top: 1px solid #f0f0f0;
        width: 100%;
        background-color: #fff;
        display: flex;
        height: 48px;
        align-items: center;
        padding: 0 30px;

        .pagination {
            margin-left: auto;
        }
    }
}

.dialog {
    ::v-deep .el-dialog__header {
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 20px;
        color: #262626;
        font-size: 14px;
        font-weight: bold;
        height: 50px;
    }

    ::v-deep .el-dialog__title {
        font-size: 14px;
        color: #303133;
        font-weight: bold;
    }

    //关闭图标
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
        font-size: 15px;
    }

    ::v-deep .el-dialog__body {
        padding: 20px;
    }

    ::v-deep .el-form-item__label {
        line-height: 32px;
        font-size: 12px;
        color: #262626;
        padding-top: 4px;
    }

    .upload {
        .uploadBtn {
            width: 80px;
            height: 32px;
            background-color: #1890ff;
            font-size: 12px;
            color: #fff;
            cursor: pointer;
            border-radius: 4px;
            transition: 0.2s;
            margin-right: 12px;
            margin-bottom: 8px;

            &:hover {
                opacity: 0.8;
            }
        }

        .el-upload__tip {
            color: #cccccc;
            font-size: 12px;
        }

        ::v-deep .el-upload-list {
            background-color: #eef3f9;
        }
    }

    .cancelBtn {
        width: 80px;
        height: 36px;
        border: 1px solid #d9d9d9;
        color: #262626;
        font-size: 12px;
        border-radius: 4px;
        background-color: #fff;
        transition: 0.2s;

        &:hover {
            color: #1890ff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
        }
    }

    .submitBtn {
        background-color: #1890ff;
        width: 80px;
        height: 36px;
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
            opacity: 0.8;
        }
    }
}

.nullPng {
    height: 300px;
    width: 100%;
    font-weight: 600;
    display: flex;
    justify-content: center;

    & div {
        text-align: center;
    }
}
</style>
  